var vm = new Vue({
    el: "#app",
    data: {
        taskName:"",  // //保存输入框中的任务名称
        taskList: [
            /* { id: 1 , name:'杜甫' , status:false } */

        ]
    },
    methods: {
        addTask() {
            var obj = { id: this.taskList.length+1, name: this.taskName, status: false };
            this.taskList.push(obj); //添加至任务列表中
            this.taskName = ""; //清空输入框
        },
        changeStatus(item) {  //更改当前任务的状态
            return item.status = !item.status;
        },
        delTask(item, index) {
            // this.taskList.splice(从第几个开始删除,删除几个[,插入项(多个用数组写)]);
            this.taskList.splice(item.id - 1, 1);  //删除所点击任务列
            /*
                写到了这里：
                            已实现：此时可以实现删除指定任务列
                            遇到问题：那如何动态的改变剩余任务列的 id 呢?
            */
        }

        
    },
    computed: {
        // 直接当做普通属性调用不加括号
        // 任何data中数据变化立即重新计算
        // 计算属性会缓存
        unFinishedTask() {
            var arr = this.taskList.filter((item) => {
                return item.status == false;
            });
            return arr.length;
        }
    },
})